<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>操作日志</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>

<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-item form-item row">
                            <div class="label"><label>操作时间</label></div>
                            <div class="flex1">
                                <div class="date-group z-df">
                                    <input type="text" placeholder="开始时间" class="fp-time" name="startTime" th:value="${startTime}">
                                    <span>-</span>
                                    <input type="text" placeholder="结束时间" class="fp-time" name="endTime" th:value="${endTime}">
                                </div>
                            </div>
                        </div>
                        <div style="display: none">
                            <input name="pageNum" th:value="${pageNum}">
                            <input name="pageSize" th:value="${pageSize}">
                        </div>
                        <div class="form-item row">
                            <div class="filter-btn z-df">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <table class="z-table">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="input j-checkbox-all">
                            </th>
                            <th>操作时间</th>
                            <th>操作人</th>
                            <th>操作模块</th>
                            <th style="width: 55%;">任务类型</th>
                            <th>任务状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="operationLog: ${operationLogList}">
                            <td>
                                <input type="checkbox" class="input j-checkbox">
                            </td>
                            <td th:text="${operationLog.operationTime}"></td>
                            <td th:text="${operationLog.userName}"></td>
                            <td th:text="${operationLog.operationModule}"></td>
                            <td th:text="${operationLog.operationContent}"></td>
                            <div th:switch="${operationLog.isSuccess}">
                                <td th:case="1">成功</td>
                                <td th:case="0">失败</td>
                            </div>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="app-card-body">
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var startTime = $('input[name=startTime]').val();
    var endTime = $('input[name=endTime]').val();
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/operationLog/list?pageNum=" + pageIndex + "&pageSize=" + pageSize;
            if (startTime) {
                url += "&startTime=" + startTime;
            }
            if (endTime) {
                url += "&endTime=" + endTime;
            }
            window.location.href = url;
        }
    })


    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    //初始化时间选择
    flatpickr.localize(flatpickr.l10ns.zh); // 设置为中文

    flatpickr(".fp-time", {
        // mode: "range",
    });

</script>
</body>

</html>